<template>
    <div class="container">
        <div class="pc-page">
            <van-row gutter="20">
                <van-col span="16">
                    <div class="contract-content">
                        <div>
                            <div class="my-title">
                                <div>
                                    已签约完成合同
                                    <span class="num">(共15份)</span>
                                </div>
                                <div class="electron-sign" @click="signShow = true">
                                    电子签约
                                </div>
                            </div>
                            <van-list
                                class="contract-list"
                            >
                                <van-cell v-for="(item,index) in list" :key="index" >
                                    <template #title>
                                        <a target="_blank" href="996">{{item.title}}</a>
                                    </template>
                                </van-cell>
                            </van-list>
                        </div>
                        <div>
                            <div class="not-sign">
                                未全部签约完成合同
                                <div class="title-desc">
                                    <span>未签约：表示合同尚未签约；</span> <br/>
                                    <span>借款人-已签约：表示客户已签署，等待银行或者机构签章。</span>
                                </div>
                            </div>
                            <van-list
                                class="not-sign-list"
                            >
                                <template v-if="notSignList.length">
                                    <van-cell v-for="(item,index) in notSignList" :key="index" >
                                        <template #title>
                                            <router-link to="/about">{{item}}</router-link>
                                        </template>
                                    </van-cell>
                                </template>
                                <van-empty v-else description="无未签约完成合同！" />

                            </van-list>
                        </div>
                    </div>
                </van-col>
                <van-col span="8">
                    <div class="tiem-line-con">
                        <timeLineView></timeLineView>
                    </div>
                </van-col>
            </van-row>
        </div>
        <div class="mobile-page">
            <div class="contract-content">
                <div>
                    <div class="my-title">
                        <div>
                            已签约完成合同
                            <span class="num">(共15份)</span>
                        </div>
                        <div class="electron-sign" @click="signShow = true">
                            电子签约
                        </div>
                    </div>
                    <van-list
                        class="contract-list"
                    >
                        <van-cell v-for="(item,index) in list" :key="index" >
                            <template #title>
                                <router-link to="https:www.baidu.com">{{item.title}}</router-link>
                            </template>
                        </van-cell>
                    </van-list>
                </div>
                <div>
                    <div class="not-sign">
                        未全部签约完成合同
                        <div class="title-desc">
                            <span>未签约：表示合同尚未签约；</span> <br/>
                            <span>借款人-已签约：表示客户已签署，等待银行或者机构签章。</span>
                        </div>
                    </div>
                    <van-list
                        class="not-sign-list"
                    >
                        <template v-if="notSignList.length">
                            <van-cell v-for="(item,index) in notSignList" :key="index" >
                                <template #title>
                                    <router-link to="/about">{{item}}</router-link>
                                </template>
                            </van-cell>
                        </template>
                        <van-empty v-else description="无未签约完成合同！" />

                    </van-list>
                </div>
            </div>
            <van-floating-bubble class="time-line-icon" icon="tosend" @click="onClick" />
        </div>
        <van-overlay :show="signShow" @click="signShow = false">
            <div class="wrapper" >
                <shareSignView></shareSignView>
            </div>
        </van-overlay>
        <van-action-sheet v-model:show="show" title="状态详情">
            <div class="state-detail-content">
                <timeLineView></timeLineView>
            </div>
        </van-action-sheet>
    </div>

   
    
</template>

<script setup lang="ts">
import { title } from 'process';
import { showToast } from 'vant';
import { onMounted, ref } from 'vue';
import timeLineView from './components/time-line.vue';
import shareSignView from './components/share-sign.vue';
import { getApproval } from '../../api/contract';

    onMounted(()=>{
        console.log('143212')
        getApproval({source_order_no: 'vx61803475861181552310480809984'}).then(res=>{
            console.log('res=>',res)
        }).catch(err=>{
            console.log('err=>',err)
        })
    })

    const show = ref(false);
    const signShow = ref(false);
    const actions = [
      { name: '选项一' },
      { name: '选项二' },
      { name: '选项三' },
    ];
    const onSelect = (item: { name: any; }) => {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      show.value = false;
      showToast(item.name);
    };


    const list = ref(
        [
            {
                title: '委托书电子版（浩驰）',
                url: 'https://h5.qichenyun.com/frame/pdfjs/web/viewer.html?file=https://gdwebappl.icbc.com.cn/efq/D7/0080100000/0080600000/2023/12/05/vx61803475861181552310480809984/00780000000000231212162248068B00/temp.pdf?vc=C1AC14B5570B843221B6010F3C4BBB7D'
            },
            {
                title: '分期抵押合同（浩驰）',
                url: 'https://h5.qichenyun.com/frame/pdfjs/web/viewer.html?file=https://gdwebappl.icbc.com.cn/efq/D7/0080100000/0080600000/2023/12/05/vx61803475861181552310480809984/00780000000000231212162250366B00/temp.pdf?vc=C1AC14B5570B843221B6010F3C4BBB7D'
            },
            {
                title: '梅河口支行营业执照',
                url: 'https://h5.qichenyun.com/frame/pdfjs/web/viewer.html?file=https://gdwebappl.icbc.com.cn/efq/D7/0080100000/0080600000/2023/12/05/vx61803475861181552310480809984/00780000000000231212162257135B00/temp.pdf?vc=C1AC14B5570B843221B6010F3C4BBB7D'
            },
            {
                title: '备案申请表（浩驰）',
                url: 'https://h5.qichenyun.com/frame/pdfjs/web/viewer.html?file=https://gdwebappl.icbc.com.cn/efq/D7/0080100000/0080600000/2023/12/05/vx61803475861181552310480809984/00780000000000231205111559399B00/temp.pdf?vc=C1AC14B5570B843221B6010F3C4BBB7D'
            },
            {
                title: '首付款证明（浩驰）',
                url: 'https://h5.qichenyun.com/frame/pdfjs/web/viewer.html?file=https://gdwebappl.icbc.com.cn/efq/D7/0080100000/0080600000/2023/12/05/vx61803475861181552310480809984/00780000000000231212162248068B00/temp.pdf?vc=C1AC14B5570B843221B6010F3C4BBB7D'
            },
            {
                title: '购车分期付款代理协议（浩驰）',
                url: 'https://h5.qichenyun.com/frame/pdfjs/web/viewer.html?file=https://gdwebappl.icbc.com.cn/efq/D7/0080100000/0080600000/2023/12/05/vx61803475861181552310480809984/00780000000000231212162248068B00/temp.pdf?vc=C1AC14B5570B843221B6010F3C4BBB7D'
            },
            {
                title: '购车分期付款代理协议（浩驰）',
                url: 'https://h5.qichenyun.com/frame/pdfjs/web/viewer.html?file=https://gdwebappl.icbc.com.cn/efq/D7/0080100000/0080600000/2023/12/05/vx61803475861181552310480809984/00780000000000231212162248068B00/temp.pdf?vc=C1AC14B5570B843221B6010F3C4BBB7D'
            },
            {
                title: '个人信息查询和使用授权书',
                url: 'https://h5.qichenyun.com/frame/pdfjs/web/viewer.html?file=https://gdwebappl.icbc.com.cn/efq/D7/0080100000/0080600000/2023/12/05/vx61803475861181552310480809984/00780000000000231212162248068B00/temp.pdf?vc=C1AC14B5570B843221B6010F3C4BBB7D'
            },
            {
                title: '个人信息查询和使用授权书（共同申请人）',
                url: 'https://h5.qichenyun.com/frame/pdfjs/web/viewer.html?file=https://gdwebappl.icbc.com.cn/efq/D7/0080100000/0080600000/2023/12/05/vx61803475861181552310480809984/00780000000000231212162248068B00/temp.pdf?vc=C1AC14B5570B843221B6010F3C4BBB7D'
            },
        ]
    );

    const notSignList = ref([])


    const onClick = () => {
      showToast('点击气泡');
      show.value = true;
    };

    const getOver = ()=>{
        console.log('点击了遮罩层')
    }

    const signClick = ()=>{
        console.log('21111111111111111')
    }

</script>

<style scoped lang="scss">

    @media only screen
    and (min-device-width : 768px){
        .pc-page{
            display: block;
        }
        .mobile-page{
            display: none;
        }
    }
    @media only screen
    and (max-device-width : 768px) {
        .pc-page{
            display: none;
        }
        .mobile-page{
            display: block;
        }
    }

    .pc-page{
        width: 70%;
        height: 100%;
        margin: 0 auto;
        // background-color: yellowgreen;
        .contract-content{
            border-radius: 2px;
            border: 1px solid #dfdfdf;
            .my-title,.not-sign{
                background-color: #f1f1f1;
            }
        }
        .tiem-line-con{
            border-radius: 2px;
            border: 1px solid #dfdfdf;
        }
    }
    
    .my-title,.not-sign{
        font-size: 15px;
        padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding) 16px;
        font-weight: 600;
        .num{
            font-size: 12px;
            color: #07c160;
        }
        .title-desc{
            margin-top: 2px;
            font-size: 12px;
            color: #ff976a;
        }
    }
    .my-title{
        display: flex;
        justify-content: space-between;
        .electron-sign{
            font-size: 12px;
            cursor: pointer;
            color: #1488f4;
        }
    }
    .van-empty{
        background-color: #fff;
    }
    
    /** 状态详情 */
    .state-detail-content{
        height: 70vh;
        overflow-y: auto;
    }
    .contract-list .van-cell::after{
        border-bottom: 1px solid var(--van-action-sheet-close-icon-color);
    }
    .contract-list .van-cell:nth-last-of-type(2)::after {
        border-bottom: 0;
    }


    .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
</style>
